<template>
  <div>
    <el-dialog :visible.sync="dialogVisible" @opened="dialogOpenedHandle" :title="dialogTitle"
               :close-on-click-modal="false">
      <el-form :model="formData" ref="menuForm" size="small" :rules="formRules" label-width="auto">
        <el-row>
          <el-col :span="24">
            <el-form-item label="上级菜单" prop="parent.id">
              <el-input v-model="formData.parent.id" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="菜单名称" prop="menuName">
              <el-input v-model="formData.menuName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="组件路径" prop="routerComponent">
              <el-input v-model="formData.routerComponent" placeholder="基于 src/views/ 的组件路径"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="路由名称" prop="routerName">
              <el-input v-model="formData.routerName" placeholder="请输入菜单链接"
                        :readonly="!formData.routerNameCustomize"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="2">
            <el-form-item prop="routerNameCustomize" label-width="10px">
              <el-checkbox v-model="formData.routerNameCustomize">自定义</el-checkbox>
            </el-form-item>
          </el-col>
          <el-col :span="20">
            <el-form-item label="菜单链接" prop="menuLink">
              <el-input v-model="formData.menuLink" placeholder="请输入菜单链接"
                        :readonly="!formData.menuLinkCustomize"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item prop="menuLinkCustomize">
              <el-checkbox v-model="formData.menuLinkCustomize">自定义</el-checkbox>
            </el-form-item>
          </el-col>
          <el-col :span="20">
            <el-form-item label="路由链接" prop="routerPath">
              <el-input v-model="formData.routerPath" placeholder="请输入路由链接"
                        :readonly="!formData.routerPathCustomize"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item prop="routerPathCustomize">
              <el-checkbox v-model="formData.routerPathCustomize">自定义</el-checkbox>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="类型" prop="type"></el-form-item>
          </el-col>
          <el-col :span="12"></el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog">关闭</el-button>
        <el-button size="small" type="primary" @click="submitForm()">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'SysMenuForm',
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    method: {
      type: String,
      required: true
    },
    dataId: {
      type: String
    },
    parentId: {
      type: String
    }
  },
  computed: {
    dialogVisible: {
      get () {
        return this.visible
      },
      set (value) {
        this.$emit('update:visible', value)
      }
    },
    dialogTitle () {
      if (this.method === 'view') {
        return '查看代码生成'
      } else if (this.method === 'add') {
        return '添加代码生成'
      } else if (this.method === 'edit') {
        return '修改代码生成'
      } else {
        return ''
      }
    }
  },
  watch: {
    'formData.routerComponent' () {
      if (!this.formData.routerNameCustomize) {
        this.formData.routerName = this.formData.routerComponent.slice(this.formData.routerComponent.lastIndexOf('/') + 1)
      }
      if (!this.formData.menuLinkCustomize) {
        this.formData.menuLink = '/' + this.formData.routerComponent
      }
      if (!this.formData.routerPathCustomize) {
        this.formData.routerPath = this.formData.routerComponent
      }
    }
  },
  data () {
    return {
      formData: {
        parent: { id: '' },
        menuName: '',
        routerComponent: '',
        menuLink: '',
        menuLinkCustomize: false,
        routerName: '',
        routerNameCustomize: false,
        routerPath: '',
        routerPathCustomize: false
      },
      formRules: {}
    }
  },
  methods: {
    dialogOpenedHandle () {
      this.resetFormData()
    },
    resetFormData () {
      this.$refs.menuForm.resetFields()
      if (this.parentId) {
        // 如果 parentId 有值，说明是添加下级菜单，给 parent.id 赋值
        this.formData.parent.id = this.parentId
      }
      if (this.dataId) {
        this.loadData()
      }
    },
    loadData () {
      this.$http.get(`/sys/menu/findById?id=${this.dataId}`).then(({ data }) => {
        console.log(data)
        this.$override(this.formData, data.data)
      })
    },
    submitForm () {
      this.$refs.menuForm.validate().then(() => {
        this.$http.postJson('/sys/menu/save', { id: this.dataId, ...this.formData }).then(({ data }) => {
          this.dialogVisible = false
          this.$emit('submit-success')
        })
      })
    },
    closeDialog () {
      this.dialogVisible = false
      this.$emit('close')
    }
  }
}
</script>

<style scoped>

</style>
